import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react'
import {
  Drawer,
  Form,
  Input,
  Select,
  Tabs,
  Button,
  Space,
  Row,
  Col
} from 'antd'
import { CloseOutlined } from '@ant-design/icons'

import { usePanelContext, useXFlowApp } from '@antv/xflow'
import type { NsGraph } from '@antv/xflow'

import {
  BaseFormItems,
  AddVariablesFormItems,
  DynamicFormItems
} from './partials'
import { InputEdit } from '@/components'
import styles from './index.module.less'
import { formatFormConfigs } from './utils/formatFormConfigs'

interface FormPanelProps {
  visible: boolean
  data?: NsGraph.INodeConfig
  onClose?: () => void
  openScriptDraw: (data: NsGraph.INodeConfig) => void
}

interface FormPanelRef {
  initDraw: (data: NsGraph.INodeConfig) => void
  close: () => void
}

const { TabPane } = Tabs

const FormPanel = (props: FormPanelProps, ref: React.Ref<FormPanelRef>) => {
  const { openScriptDraw } = props
  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()
  const [nodeInfo, setNodeInfo] = useState({})
  const [formConfigs, setFormConfigs] = useState([])

  const onClose = () => {
    setVisible(false)
  }
  const onSubmit = async () => {
    // form.getFieldsValue(true)
    form.validateFields().then(res => {
      console.log(res)
    })
  }
  useImperativeHandle(ref, () => ({
    initDraw: nodeData => {
      try {
        const { data } = nodeData
        const { node_conf } = data
        form.resetFields()
        form.setFieldsValue({
          display: node_conf.display,
          name: node_conf.name,
          description: node_conf.description,
          category: node_conf.category,
          tags: node_conf.tags,
          variables: node_conf?.variables?.value,
          input: node_conf?.input?.value
        })
  
        setNodeInfo(data)
        setFormConfigs(formatFormConfigs(data.node_conf?.input?.form))
        setVisible(true)
      } catch (error) {
        console.log(error);
        
      }

    },
    close: onClose
  }))
  return (
    <>
      <Drawer
        className={styles['node-config-draw']}
        placement="right"
        mask={false}
        visible={visible}
        getContainer={false}
        keyboard={false}
        closeIcon={false}
        width={400}
        style={{
          position: 'absolute'
          // top: 40,
          // bottom: 150,
          // height: 'unset'
        }}
        footer={
          <Space>
            <Button onClick={onClose}>取消</Button>
            <Button type="primary" onClick={onSubmit}>
              确定
            </Button>
          </Space>
        }
      >
        <Form autoComplete="off" form={form} labelCol={{ span: 6 }} labelWrap>
          <Row className="node-config-draw-header">
            <Col span={12}>
              <Form.Item
                name="display"
                rules={[{ required: true, message: '请输入节点名称' }]}
              >
                <InputEdit />
              </Form.Item>
            </Col>
            <Col span={12} className="node-config-draw-close-icon">
              <CloseOutlined onClick={onClose} />
            </Col>
          </Row>
          <div className="node-config-draw-body">
            <BaseFormItems />
            <Tabs>
              {nodeInfo.node_id === 'VARIABLE_NODE' ? (
                <TabPane tab="手动配置" key="1">
                  <AddVariablesFormItems field="variables" />
                </TabPane>
              ) : (
                <>
                  <TabPane tab="输入" key="1">
                    <DynamicFormItems formConfigs={formConfigs} field="input" />
                  </TabPane>
                  <TabPane tab="输出" key="2">
                    Content of Tab Pane 2
                  </TabPane>
                </>
              )}
            </Tabs>
          </div>
          <Button onClick={() => openScriptDraw(nodeInfo.node_conf.script)}>脚本编辑</Button>
        </Form>
      </Drawer>
    </>
  )
}
export default forwardRef(FormPanel)
